<template>
  <el-dialog
    v-model="dialogVisible"
    width="55%"
    :draggable="true"
    @close="closeDialog"
    class="tag-detail-dialog"
  >
    <div class="dialog-header">
      <h2 class="tag-name">{{ data.name }}</h2>
      <div class="tag-meta">
        <span class="meta-item">
          <el-icon><User/></el-icon>
          创建者: {{ data.createBy }}
        </span>
        <span class="meta-item">
          <el-icon><Clock/></el-icon>
          创建于: {{ formatDateTime(data.createTime) }}
        </span>
        <span class="meta-item">
          <el-icon><HomeFilled/></el-icon>
          所属家庭: {{ data.familyName }}
        </span>
      </div>
    </div>

    <el-tabs v-model="activeTab" type="card" class="detail-tabs">
      <el-tab-pane label="标签概览" name="detail">
        <el-scrollbar height="400px">
          <div class="detail-content">
            <el-descriptions :column="2" border class="tag-descriptions">
              <el-descriptions-item label="创建时间" label-class-name="desc-label">
                <template #label>
                  <el-icon>
                    <Clock/>
                  </el-icon>
                  <span>创建时间</span>
                </template>
                {{ formatDateTime(data.createTime) }}
              </el-descriptions-item>

              <el-descriptions-item label="最后更新" label-class-name="desc-label">
                <template #label>
                  <el-icon>
                    <Refresh/>
                  </el-icon>
                  <span>最后更新</span>
                </template>
                {{ formatDateTime(data.updateTime || data.createTime) }}
              </el-descriptions-item>

              <el-descriptions-item label="所属家庭" label-class-name="desc-label">
                <template #label>
                  <el-icon>
                    <HomeFilled/>
                  </el-icon>
                  <span>所属家庭</span>
                </template>
                <el-tag type="info" size="large">{{ data.familyName }}</el-tag>
              </el-descriptions-item>

              <el-descriptions-item label="创建者" label-class-name="desc-label">
                <template #label>
                  <el-icon>
                    <User/>
                  </el-icon>
                  <span>创建者</span>
                </template>
                <el-tag size="large">{{ data.createBy }}</el-tag>
              </el-descriptions-item>
            </el-descriptions>

            <div class="description-section">
              <h3 class="section-title">
                <el-icon><Document/></el-icon>
                <span>标签描述</span>
              </h3>
              <div class="description-content">
                {{ data.description || '暂无描述' }}
              </div>
            </div>
          </div>
        </el-scrollbar>
      </el-tab-pane>

      <el-tab-pane label="使用统计" name="usage">
        <el-scrollbar height="400px">
          <div class="usage-stats">
            <div class="stat-card">
              <div class="stat-icon">
                <el-icon color="#67C23A">
                  <Collection/>
                </el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">24</div>
                <div class="stat-label">使用次数</div>
              </div>
            </div>

            <div class="stat-card">
              <div class="stat-icon">
                <el-icon color="#409EFF">
                  <User/>
                </el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">8</div>
                <div class="stat-label">使用人数</div>
              </div>
            </div>

            <div class="recent-usage">
              <h3 class="section-title">
                <el-icon><Clock/></el-icon>
                <span>最近使用记录</span>
              </h3>
              <el-table
                :data="usageData"
                style="width: 100%"
                stripe
                class="usage-table"
              >
                <el-table-column prop="user" label="使用者" width="180">
                  <template #header>
                    <el-icon>
                      <User/>
                    </el-icon>
                    <span>使用者</span>
                  </template>
                </el-table-column>
                <el-table-column prop="time" label="使用时间">
                  <template #header>
                    <el-icon>
                      <Clock/>
                    </el-icon>
                    <span>使用时间</span>
                  </template>
                </el-table-column>
                <el-table-column prop="item" label="关联项目">
                  <template #header>
                    <el-icon>
                      <Link/>
                    </el-icon>
                    <span>关联项目</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>


  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import type { TagCard } from "@/api/tag/type.ts";
import { ElMessage } from "element-plus";
import {
  User,
  Clock,
  HomeFilled,
  Refresh,
  Document,
  Collection,
  Link
} from '@element-plus/icons-vue'

const activeTab = ref("detail");
const props = defineProps<{
  data: TagCard,
  visible: boolean,
}>();

const emit = defineEmits(["update:visible", "refresh"]);

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit("update:visible", val)
});

// 模拟使用数据
const usageData = [
  { user: '张三', time: '2023-05-15 14:30', item: '支出1' },
  { user: '李四', time: '2023-05-14 09:15', item: '支出2' },
  { user: '王五', time: '2023-05-12 16:45', item: '支出3' },
  { user: '赵六', time: '2023-05-10 11:20', item: '支出4' },
]

const closeDialog = () => {
  dialogVisible.value = false;
};

// 格式化日期显示
const formatDateTime = (dateString: string) => {
  return new Date(dateString).toLocaleString();
};


</script>

<style scoped lang="scss">
.tag-detail-dialog {
  :deep(.el-dialog__header) {
    padding-bottom: 0;
    margin-right: 0;
  }

  :deep(.el-dialog__body) {
    padding-top: 10px;
  }

  .dialog-header {
    padding: 0 20px 15px;
    border-bottom: 1px solid var(--el-border-color-light);
    margin-bottom: 15px;

    .tag-name {
      margin: 0;
      font-size: 20px;
      color: var(--el-text-color-primary);
      font-weight: 600;
    }

    .tag-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 8px;
      font-size: 13px;
      color: var(--el-text-color-secondary);

      .meta-item {
        display: inline-flex;
        align-items: center;
        gap: 5px;
      }
    }
  }

  .detail-tabs {
    :deep(.el-tabs__header) {
      margin: 0;
    }

    :deep(.el-tabs__item) {
      font-size: 14px;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
    }

    :deep(.el-tabs__content) {
      padding: 15px;
    }
  }

  .detail-content {
    padding: 10px;

    .tag-descriptions {
      margin-bottom: 20px;

      :deep(.desc-label) {
        width: 120px;

        .el-icon {
          margin-right: 5px;
        }
      }
    }

    .description-section {
      margin-top: 25px;

      .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        color: var(--el-text-color-primary);
        margin-bottom: 12px;
      }

      .description-content {
        padding: 12px;
        background-color: var(--el-fill-color-light);
        border-radius: 4px;
        line-height: 1.6;
      }
    }
  }

  .usage-stats {
    padding: 10px;

    .stat-card {
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 15px;
      background-color: var(--el-fill-color-lighter);
      border-radius: 8px;
      margin-bottom: 20px;

      .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: rgba(64, 158, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;

        .el-icon {
          font-size: 24px;
        }
      }

      .stat-content {
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: var(--el-text-color-primary);
        }

        .stat-label {
          font-size: 13px;
          color: var(--el-text-color-secondary);
        }
      }
    }

    .recent-usage {
      margin-top: 25px;

      .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        color: var(--el-text-color-primary);
        margin-bottom: 12px;
      }
    }

    .usage-table {
      :deep(.el-table__header-wrapper .cell) {
        display: flex;
        align-items: center;
        gap: 6px;
      }
    }
  }
}

:deep(.el-tabs__item.is-active) {
  color: #1F63FF;
  font-weight: bold;
}
</style>
